<template>
  <view class="sign-wrap" :style="{
    backgroundImage: 'url(' + loginBgUrl + ')',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center',
    backgroundSize: '100% 100%'
  }">
    <div class="sign-top">
      <view class="custom-nav-bar">
        <!-- 返回按钮 -->
        <view class="nav-back" @click="goBack">
          <image src="/static/back.png" mode=""></image>
        </view>
        <!-- 页面标题 -->
        <view class="nav-title">签到</view>
      </view>
      <div class="jifennum">
        <span>当前积分：</span>
        <p>{{ scroeObj.score }}</p>
      </div>
    </div>
    <div class="sign-date">
      <youlanSignIn :integral="integral" :isIntegral="isIntegral" :checkinDays="checkinDays" :already="data"
        :supplementary="true" type="sign" lang="zh" @change="signDate" @toPointsDetail="toPointsDetail" />
    </div>
    <div class="my-achievement">
      <p class="title">我的成就</p>
      <div class="qiandaofenshu">
        <div class="qdleft">
          <image :src="Image1" mode="widthFix"></image>
          <span>累计签到</span>
        </div>
        <div class="qdright">
          <p>
            {{ scroeObj.total_sign_score }}
            <span>分</span>
          </p>
        </div>
      </div>
    </div>
    <div class="signbtn" @click="toSign">签 到</div>
  </view>
</template>

<script>
import { toSign, getSignStat } from "@/api/mine.js";
import youlanSignIn from "@/components/youlan-SignIn/youlan-SignIn.vue";
export default {
  components: {
    youlanSignIn,
  },
  data() {
    return {
      scroeObj: {},
      data: [],
      loginBgUrl: this.$Config.HTTP_REQUEST_URL + "/zufang/jifenbg1.png",
      checkinDays: 0, // 连续签到天数
      integral: 0, // 本次签到获取的积分
      isIntegral: false, // 是否显示签到积分模块
      Image1: this.$Config.HTTP_REQUEST_URL + "/zufang/signicon.png",
    };
  },
  onLoad() {
    this.getSignStat();
  },
  methods: {
    async getSignStat() {
      const res = await getSignStat();
      if (res.response.statusCode === 200) {
        this.scroeObj = res.data.data;
        // console.log(res.data.data, 'this.contentObj');
      } else {
        this.scroeObj = {};
      }
    },
    signDate(v) {
      console.log(v);
      // this.checkinDays = this.checkinDays + 1;
    },
    async toSign() {
      const res = await toSign();
      if (res.response.statusCode === 200) {
        uni.showToast({
          title: "签到成功！",
          icon: "success",
        });
        uni.switchTab({
          url: "/pages/mine/mine",
        });
      } else {
        uni.showToast({
          title: "签到失败！",
          icon: "fail",
        });
      }
    },
    goBack() {
      uni.navigateBack({ delta: 1 });
    },
    toPointsDetail(year, month) {
      const signDate = year + "-" + "0" + month;
      // console.log(signDate, 'year, month');
      uni.navigateTo({
        url: "/pages/mine/pointsDetail?signDate=" + signDate,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.sign-wrap {
  // padding-bottom: 30px;
  width: 100%;
  // height: 100vh;
  height: 380px;
  // background: url("https://d-zufang.bigchun.com/zufang/jifenbg1.png") no-repeat center;
  background-size: 100% 100%;
}

.sign-top {
  // width: 100%;
  // height: 280px;
  // background: url('https://d-zufang.bigchun.com/zufang/jifenbg.png') center;
  // background-size: 100% 100%;
}

.custom-nav-bar {
  height: 50px;
  /* 导航栏高度 */
  display: flex;
  align-items: center;
  color: #000;
  padding: 30px 16px 16px 16px;
}

.nav-back {
  flex: 0 0 auto;
  cursor: pointer;

  image {
    width: 12px;
    height: 24px;
    // padding-left: 16px;
  }
}

.nav-title {
  flex: 1 1 auto;
  text-align: center;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 17px;
  color: #000000;
}

.jifennum {
  margin-left: 24px;

  span {
    font-weight: 400;
    font-size: 13px;
    color: #ffffff;
  }

  p {
    font-weight: 600;
    font-size: 30px;
    color: #ffffff;
  }
}

.sign-date {
  // width: 335px;
  // height: 286px;
  margin-top: 78px;
}

.my-achievement {
  .title {
    font-weight: 600;
    font-size: 16px;
    color: #222222;
    margin-left: 16px;
    margin-bottom: 16px;
  }

  .qiandaofenshu {
    width: 84%;
    padding: 16px;
    background: #ffffff;
    box-shadow: 0px 2px 16px 0px rgba(0, 149, 248, 0.16);
    border-radius: 12px;
    border-image: linear-gradient(180deg,
        rgba(255, 255, 255, 1),
        rgba(255, 255, 255, 1)) 1 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px auto;

    .qdleft {
      display: flex;
      align-items: center;

      image {
        width: 44px;
        height: 44px;
        margin-right: 10px;
      }

      span {
        font-weight: 500;
        font-size: 14px;
        color: #222222;
      }
    }

    .qdright {
      p {
        font-weight: 600;
        font-size: 22px;
        color: #775238;

        span {
          font-weight: 500;
          font-size: 11px;
          color: #775238;
        }
      }
    }
  }
}

.signbtn {
  width: 335px;
  height: 44px;
  background: #0095f8;
  box-shadow: 0px 2px 4px 0px rgba(0, 149, 248, 0.5);
  border-radius: 22px;
  margin: 60px auto 30px auto;
  color: #ffffff;
  line-height: 44px;
  text-align: center;
}
</style>
